<template>
	<el-card class="table-card">
		<el-table :data="data" :highlight-current-row="true" :row-class-name="tableRowClassName" :show-summary="isSum" :summary-method="getSums" border fit
			height="calc(59vh)" row-key="id" style="width: 100%">
			<el-table-column :label="label" :prop="prop" :width="labelWidth" align="center"></el-table-column>
			<template v-for="item in columns">
				<el-table-column :label="item" align="center">
					<template v-slot="scope">
						<span>{{scope.row[item]}}</span>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<el-pagination :current-page.sync="currentPage" :hide-on-single-page="false" :page-count="totalPage" :page-size.sync="pageSize"
			:page-sizes="pageSizes" :total="totalCount" background layout="total, sizes, prev, pager, next, jumper, slot" @size-change="handleSizeChange"
			@current-change="handleCurrentChange"><span class="el-pagination__total total-page">共&nbsp;{{totalPage}}&nbsp;页</span>
		</el-pagination>
	</el-card>
</template>

<script>

export default {
	name: "double-table",//二维表格
	props: {
		data: {
			type: Array,
			default() {
				return [];
			}
		},
		columns: {
			type: Array,
			default() {
				return [];
			},
			validator: (value) => {
				return value.length >= 1;
			}
		},
		label: {
			type: String
		},
		prop: {
			type: String
		},
		stripe: {
			type: Boolean,
			default: true
		},
		totalCount: {
			type: Number,
			default: 0
		},
		isSum: {
			type: Boolean,
			default: true
		},
		labelWidth: {
			type: String,
			default: "160px"
		}
	},
	data() {
		return {
			currentPage: 1,
			pageSize: 10,
			pageSizes: [10, 20, 30, 40]
		};
	},
	computed: {
		totalPage() {
			let pageCount = this.totalCount % this.pageSize === 0 ? this.totalCount / this.pageSize : parseInt(this.totalCount / this.pageSize) + 1;
			return pageCount === 0 ? 1 : pageCount;
		}
	},
	methods: {
		handleSizeChange(val) {
			this.pageSize = val;
			this.$emit("handle-size", this.pageSize);
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.$emit("handle-current", this.currentPage);
		},
		getSums() {
			if (this.isSum) {
				let sums = this.sumUtils.getSums(this.data, this.columns, 1, true);
				if (sums.filter(s => s != null && s !== "").length === 1) {
					this.isSum = false;
				} else {
					return sums;
				}
			}
		},
		tableRowClassName({row, rowIndex}) {
			if (this.stripe) {
				return rowIndex % 2 === 0 ? "stripe-row" : "";
			} else {
				if (row.level === "warning") {
					return "warning-row";
				} else if (row.level === "info") {
					return "success-row";
				} else if (row.level === "error") {
					return "error-row";
				}
				return "debug-row";
			}
		}
	}
};
</script>

<style scoped>
.table-card {
	padding: 0;
	margin-top: 5px;
	height: calc(65.6vh);
	background-color: #F5F5F5;
}

.table-card >>> .el-card__body {
	padding: 10px;
}

.table-card >>> .el-table {
	background-color: whitesmoke;
	border-width: 2px;
}

.table-card >>> .el-table tr {
	height: calc(5.2vh);
}

.table-card >>> .el-table th.el-table__cell > .cell {
	font-size: 18px;
}

.table-card >>> .el-input__inner {
	text-align: center;
}

.table-card >>> .el-pagination__sizes .el-input .el-input__inner {
	width: calc(5.8vw);
}

.table-card >>> .warning-row {
	color: #F3A616;
	/*background-color: #F6C975;*/
}

.table-card >>> .success-row {
	color: #02A98F;
	/*background-color: #A1F175;*/
}

.table-card >>> .error-row {
	color: #F51E30;
	/*background-color: #F6747F;*/
}

.table-card >>> .debug-row {
	color: #1D4CF8;
	/*background-color: #9EB1F6;*/
}

.table-card >>> .stripe-row {
	background-color: #E4E8EE;
}

.total-page {
	margin-left: 20px;
}
</style>
